<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .content-div {
            opacity: 1;
            background: #f7f7f7;
            border-radius: 10px;
            text-align: center;
            padding-top: 33px;
            font-size: 16px;
            font-family: Source Han Sans CN, Source Han Sans CN-Medium;
            font-weight: 500;
            text-align: justifyLeft;
        }
        
        .item {
            margin-bottom: 37px;
        }
        
        .active {
            display: flex;
            align-items: center;
            width: 55%;
            justify-content: space-evenly;
            margin: 0 auto;
            margin-bottom: 37px;
            color: #23cfa3;
        }
        
        .active::before {
            width: 0;
            height: 0;
            border-left: 8px solid #01b68f;
            border-bottom: 4px solid transparent;
            border-top: 4px solid transparent;
            content: '';
        }
        
        .active::after {
            width: 0;
            height: 0;
            border-right: 8px solid #01b68f;
            border-bottom: 4px solid transparent;
            border-top: 4px solid transparent;
            content: '';
        }
    </style>
</head>

<body>
    <div style="width:180px;height:602px" class="content-div">
        <div class="item active">立项申请</div>
        <div class="item">资料填报</div>
        <div class="item">现场踏勘</div>
        <div class="item">人员访谈</div>
        <div class="item">人员访谈</div>
    </div>

    <script>
        const user = {
            name: '刘学奇',
            age: 24,
            wife: [],
        };

        // 生成代理对象
        var proxy = new Proxy(user, {
            get(target, key) {
                console.log('调用get属性值');
                return Reflect.get(target, key);
            },
            set(target, key, value) {
                console.log('调用set设置属性');
                return Reflect.set(target, key, value);
            },
            deleteProperty(target, key) {
                console.log('delete属性');
                return Reflect.deleteProperty(target, key);
            },
        });
        // 打印名称
        console.log(proxy.name);
        // 查看目标对象
        console.log(user);
        // 设置属性
        proxy.gender = '男';
        // 查看目标对象
        console.log(user);
    </script>
</body>

</html>